<template>
  <el-container class="main_con" style="padding-bottom: 0px">
    <div class="setting">
      <div class="setting_body">
        <div class="setting_body_item">
          <div class="header">步骤一：在开发平台创建第三方平台,按以下内容复制</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form size="small" label-width="200px" :model="obj.configuration">
                <el-form-item label="登录授权发起页域名">
                  <el-input v-model="obj.host" style="width:360px;" disabled type="text" placeholder="请输入内容"></el-input>
                  <el-button type="text" style="margin-left: 10px;" @click="doCopy(obj.host)">复制</el-button>
                </el-form-item>
                <el-form-item label="授权事件接收URL">
                  <el-input v-model="obj.event_rollback" style="width:360px;" disabled type="text" placeholder="请输入内容"></el-input>
                  <el-button type="text" style="margin-left: 10px;" @click="doCopy(obj.event_rollback)">复制</el-button>
                </el-form-item>
                <el-form-item label="消息校验Token">
                  <el-input placeholder="点击生成" v-model.trim="obj.configuration.token" style="width:360px" disabled></el-input>
                  <el-button type="text" style="margin-left: 10px;" @click="getkeyword('Token')">生成</el-button>
                  <el-button type="text" style="margin-left: 10px;" @click="doCopy(obj.configuration.token)">复制</el-button>
                </el-form-item>
                <el-form-item label="消息加密Key">
                  <el-input placeholder="点击生成" v-model.trim="obj.configuration.encodingAesKey" style="width:360px" disabled></el-input>
                  <el-button type="text" style="margin-left: 10px;" @click="getkeyword('EncodingAESKey')">生成</el-button>
                  <el-button type="text" style="margin-left: 10px;" @click="doCopy(obj.configuration.encodingAesKey)">复制</el-button>
                </el-form-item>
                <el-form-item label="消息与事件接收URL">
                  <el-input v-model="obj.msg_rollback" style="width:360px;" disabled type="text" placeholder="请输入内容"></el-input>
                  <el-button type="text" style="margin-left: 10px;" @click="doCopy(obj.msg_rollback)">复制</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">步骤二：第三方平台创建成功后，填写appid和appsecret</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form size="small" label-width="200px" ref="itemForm" :model="obj.configuration" :rules="Rules">
                <el-form-item label="第三方平台AppId" prop="appid">
                  <el-input v-model="obj.configuration.appid" style="width:360px;" type="text" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="第三方平台appsecret" prop="appsecret">
                  <el-input v-model="obj.configuration.appsecret" style="width:360px;" type="text" placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div class="setting_bootom"><el-button v-has size="medium" type="primary" @click="saveData">提交</el-button></div>
    </div>
  </el-container>
</template>

<script>
import {getsetting, WeixinAppSave} from '@/api/mall/quick';
import {randomWord} from '@/utils/index.js';

export default {
  data() {
    return {
      obj: {
        configuration: {
          appid: '',
          appsecret: '',
          encodingAesKey: '',
          token: ''
        },
        event_rollback: '',
        host: '',
        msg_rollback: ''
      },
      Rules: {
        appid: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入appsecret'
          }
        ],
        appsecret: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入appsecret'
          }
        ]
      }
    };
  },

  mounted() {
    this.getdetail();
  },
  methods: {
    doCopy(text) {
      this.$copyText(text).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          let data = {
            configuration: this.obj.configuration
          };
          WeixinAppSave(data).then(res => {
            this.getdetail();
            // this.$message.success('采集成功');
          });
        }
      });
    },
    getdetail() {
      getsetting({}).then(res => {
        if (res.msg.configuration) {
          this.obj = res.msg;
        }
      });
    },
    getkeyword(type) {
      if (type == 'Token') {
        this.obj.configuration.token = randomWord(false, 32);
      } else {
        this.obj.configuration.encodingAesKey = randomWord(false, 43);
        console.log(this.obj)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content {
  border-bottom: 0;
}

.setting {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);

  .setting_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .setting_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
</style>
